<template>
  <div class="big-screen">
    <!-- 顶部 -->
    <Header :title="title" />
    <el-row :gutter="2" class="w-full" style="height: calc(100% - 105px)">
      <!-- 左侧 -->
      <el-col :span="8">
        <!-- 人次分析 -->
        <div class="w-full h-1/3">
          <div class="w-1/3 h-4 mx-2 model-title">人次分析</div>
          <Patient :data="patientData" />
        </div>
        <!-- DRG患者调查 -->
        <div class="w-full h-1/3">
          <div class="w-1/3 h-4 mx-2 model-title">DRG患者调查</div>
          <div class="w-full p-2" style="height: calc(100% - 16px)">
            <PieChart :data="pieData" class="w-3/5 h-full inline-block" />
            <PercentChart
              :data="percentData"
              class="w-2/5 h-full inline-block"
            />
          </div>
        </div>
        <!-- 各科药品占比 -->
        <div class="w-full h-1/3">
          <div class="w-1/3 h-4 mx-2 model-title">各科药品占比</div>
          <div class="w-full" style="height: calc(100% - 10px)">
            <BarChart
              :data="barData"
              unit="%"
              title="百分比"
              class="w-full h-full inline-block"
            />
          </div>
        </div>
      </el-col>
      <!-- 中间 -->
      <el-col :span="8">
        <!-- 转动动画 后面需要替换为医院透视图图片 -->
        <div class="w-full h-1/2">
          <div style="position: absolute; top: 48%; left: 38%">
            <dv-decoration-11 style="width: 200px; height: 60px">
              {{ baseData.patient_in.name }} -
              <span class="text-3xl font-bold">{{ baseData.patient_in.value }}</span>
            </dv-decoration-11>
          </div>
          <div style="position: absolute; top: 48%; right: 38%">
            <dv-decoration-11 style="width: 200px; height: 60px">
              {{ baseData.patient_out.name }} -
              <span class="text-3xl font-bold">{{ baseData.patient_out.value }}</span>
            </dv-decoration-11>
          </div>
          <div
            class="main"
            style="width: 400px; height: 400px; margin: 0 auto; z-index: -1"
          />
          <div class="absolute ml-56 -mt-96">
            <Medical class="w-72 h-72 ml-2 -mt-6" style="opacity: 0.6" />
          </div>
        </div>
        <!-- 医师人数、护士人数、床位数 -->
        <div class="w-full h-1/4">
          <div
            style="
              position: absolute;
              bottom: 26%;
              height: 124px;
              line-height: 80px;
            "
            class="w-1/3 flex justify-around text-center text-lg font-bold base_info"
          >
            <div class="w-1/4 h-full doctor">
              <p>{{ baseData.doctor_num.name }}</p>
              <p class="-mt-5 text-3xl">{{ baseData.doctor_num.value }}</p>
            </div>
            <div class="w-1/4 h-full nurse">
              <p>{{ baseData.nurse_num.name }}</p>
              <p class="-mt-5 text-3xl">{{ baseData.nurse_num.value }}</p>
            </div>
            <div class="w-1/4 h-full bed">
              <p>{{ baseData.total_bed.name }}</p>
              <p class="-mt-5 text-3xl">{{ baseData.total_bed.value }}</p>
            </div>
            <div class="w-1/4 h-full open_bed">
              <p>{{ baseData.open_bed.name }}</p>
              <p class="-mt-5 text-3xl">{{ baseData.open_bed.value }}</p>
            </div>
          </div>
        </div>
        <!-- 门诊收入 TOP5 -->
        <div class="w-full h-1/4">
          <div class="w-1/3 h-4 mx-2 model-title">门诊收入 TOP5</div>
          <TopChart
            :data="topData"
            unit="万"
            class="w-full h-full inline-block"
          />
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="8">
        <!-- 费用分析 -->
        <div class="w-full h-1/4">
          <div class="w-1/3 h-4 mx-2 model-title">费用分析</div>
          <Expense :data="expenseData" />
        </div>
        <!-- 财务分析 -->
        <div class="w-full h-2/4">
          <div class="w-1/3 h-4 mx-2 model-title">财务分析</div>
          <div class="h-full flex justify-around p-1.5">
            <div class="w-1/2 h-full mr-0.5">
              <FinanceTable
                title="财务分析"
                unit="（万）"
                :data="financeData"
                @handleChange="changeFunc"
              />
            </div>
            <div class="w-1/2 h-full">
              <FinanceTable
                title="医院收入"
                unit="（万）"
                :data="financeData2"
                @handleChange="changeFunc"
              />
            </div>
          </div>
        </div>
        <!-- 床位使用率 TOP5 -->
        <div class="w-full h-1/4">
          <div class="w-1/3 h-4 mx-2 model-title">床位使用率 TOP5</div>
          <div class="w-full pt-2" style="height: calc(100% - 10px)">
            <BarChart
              :data="topData2"
              unit="%"
              title="百分比"
              class="w-full h-full inline-block"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
// import Background from "./components/background.vue";
// const backgroundImageUrl = ref("src/assets/static/images/53bg.png");
// const HeaderImageUrl = ref("src/assets/static/images/53titlebg.png");
import Medical from "@/assets/svg/medical.svg?component";
import Header from "./components/header.vue";
import Footer from "./components/footer.vue";
const title = ref<string>("医院院长管驾舱");

// 人次分析组件
import Patient from "./components/patient.vue";
const patientData = reactive<object>({
  registerTitle: "挂号人次",
  registerValue: 37865,
  visitTitle: "就诊人次",
  visitValue: 32813,
  firstVisitTitle: "初诊人次",
  firstVisitValue: 32813,
  secondVisitTitle: "复诊人次",
  secondVisitValue: 23145
});

// DGA患者调查组件
import PieChart from "./components/pieChart.vue";
import PercentChart from "./components/percentChart.vue";
const pieData = reactive<Array>([
  { name: "男性", value: 152345 },
  { name: "女性", value: 137653 }
]);
const percentData = reactive<object>({
  title: "医保付款占比",
  value: 88.23
});

// 各科药品占比
import BarChart from "./components/barChart.vue";
const barData = reactive<Array>([
  { name: "外科", value: 80 },
  { name: "内科", value: 75 },
  { name: "神经科", value: 70 },
  { name: "儿科", value: 63 },
  { name: "感染科", value: 58 },
  { name: "肿瘤科", value: 55 },
  { name: "急诊科", value: 50 },
  { name: "骨科", value: 43 }
]);

// 门诊收入TOP5
import TopChart from "./components/topChart.vue";
const topData = reactive<Array>([
  { name: "肿瘤科", value: 280 },
  { name: "外科", value: 265 },
  { name: "儿科", value: 260 },
  { name: "感染科", value: 240 },
  { name: "牙科", value: 220 }
]);

// 床位使用率TOP5
const topData2 = reactive<Array>([
  { name: "儿科", value: 76.0 },
  { name: "外科", value: 71.5 },
  { name: "妇产科", value: 71.0 },
  { name: "超声医学科", value: 68.0 },
  { name: "骨科", value: 65.3 }
]);

// 医疗总费用
import Expense from "./components/expense.vue";
const expenseData = reactive<object>({
  totalTitle: "医疗总费用",
  totalValue: 16430,
  outpatientTitle: "门诊总费用",
  outpatientValue: 8765,
  hospitalTitle: "住院总费用",
  hospitalValue: 7459,
  unit: "万"
});

// 财务分析 & 医院收入
import FinanceTable from "./components/financeTable.vue";
const financeData = reactive<Array>([
  { name: "营业收入", value: 110168 },
  { name: "营业总成本", value: 50582 },
  { name: "营业利润", value: 58462 },
  { name: "利润总额", value: 89734 },
  { name: "净利润", value: 96064 },
  { name: "净利润环比增长率", value: "16%" },
  { name: "预算金额", value: 94160 },
  { name: "预算完成率", value: "72%" }
]);
const financeData2 = reactive<Array>([
  { name: "总收入", value: 859.59 },
  { name: "门诊收入", value: 38.99 },
  { name: "体检收入", value: 48.5 },
  { name: "医用材料收入", value: 55.18 },
  { name: "药品收入", value: 43.45 }
]);
const changeFunc = val => {
  console.log(val, "=======================");
};

// 医师人数、护士人数、床位数、住院人数、出院人数
const baseData = reactive<object>({
  patient_in: { name: "住院人次", value: 13967 },
  patient_out: { name: "出院人次", value: 16263 },
  doctor_num: { name: "医师人数", value: 663 },
  nurse_num: { name: "护士人数", value: 2263 },
  total_bed: { name: "编制床位", value: 3800 },
  open_bed: { name: "开放床位", value: 3263 }
});
</script>

<style scoped lang="scss"></style>
